import React, {PureComponent} from 'react';
import {Divider, Form, Icon, message, Popconfirm, Table, Tooltip, Button, Modal} from 'antd';
import {connect} from 'dva';

const { confirm } = Modal;

let expandKeys = [];

@connect(state => ({
  menu: state.menu,
}))
@Form.create()
class StandardTable extends PureComponent {
  state = {
    selectedRowKeys: []
  };

  handleMenuClick = (record, key) => {
    const {onEditItem, dispatch} = this.props;
    if (key === "edit") {
      onEditItem(record, true)
    } else if (key === "del") {
      if (record.children) {
        console.log("有孩子");
        confirm({
          title: '警告：该菜单含有子菜单，如果删除，会一并删除！',
          // content: '警告：菜单下还有子菜单，会一并删除！',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            dispatch({
              type: 'menu/remove',
              payload: {id: record.id},
              callback: (resultData) => {
                if (resultData.resultCode === "1") {
                  message.success('删除成功');
                } else {
                  message.success('删除失败');
                }
              },
            });
          },
          onCancel() {
            console.log('Cancel');
          },
        });
      } else {
        dispatch({
          type: 'menu/remove',
          payload: {id: record.id},
          callback: (resultData) => {
            if (resultData.resultCode === "1") {
              message.success('删除成功');
            } else {
              message.success('删除失败');
            }
          },
        });
      }
    }
  }

  componentWillReceiveProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      this.setState({
        selectedRowKeys: []
      });
    }
    this.setState({expandedRowKeys: expandKeys});
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }
    this.setState({selectedRowKeys});
  }

  render() {
    const {selectedRowKeys, expandedRowKeys} = this.state;
    const {data: {rows}, loading} = this.props;

    const columns = [
      {
        title: '菜单名称',
        render: (rec) => <><Icon type={rec.icon} style={{paddingRight: 5}}/>{rec.name}</>
      },
      {
        title: '编号',
        dataIndex: 'code',
        align:'center',
      },
      {
        title: '路由路径',
        dataIndex: 'path',
        align:'center',
      },
      {
        title: '排序',
        dataIndex: 'sortNo',
        align:'center',
      },
      {
        title: '操作',
        width: 55,
        render: (record) => (
          <div style={{width: 50}}>
            <Tooltip placement="top" title='修改'>
              <Button style={{padding: 0}} type="link" onClick={() => this.handleMenuClick(record, 'edit')}><span><Icon
                type="edit"/></span></Button>
            </Tooltip>
            <Divider type="vertical"/>
            <Popconfirm title="确定要删除该菜单吗？" onConfirm={() => this.handleMenuClick(record, 'del')}>
              <Tooltip placement="top" title='删除'>
                <Button style={{padding: 0}} type="link"><span style={{color: '#f13d74'}}><Icon type="delete"/></span></Button>
              </Tooltip>
            </Popconfirm>
          </div>
        ),
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <Table
        size="small"
        loading={loading}
        rowKey={record => record.id}
        rowSelection={rowSelection}
        dataSource={rows}
        columns={columns}
        pagination={false}
        expandedRowKeys={expandedRowKeys}
        onExpand={(expanded, record) => {
          let expandedRowKeys = [];
          if (expanded) {
            expandKeys.push(record.id);
            expandKeys.map(item => expandedRowKeys.push(item));
            this.setState({expandedRowKeys})
          } else {
            expandKeys = expandKeys.filter(item => item !== record.id);
            expandKeys.map(item => expandedRowKeys.push(item));
          }
          this.setState({expandedRowKeys})
        }}
      />
    );
  }
}

export default StandardTable;
